<template>
  <div class="container w-full h-full mx-10 mt-5">
    <div class="font-mono text-2xl font-extrabold">{{ house.title }}</div>
    <Gallery class="gallery" :imgs="imgs" />
    <!-- 房间预定 -->
    <el-card class="flex justify-center mb-4 align-middle box-card">
      <div class="block">
        <span class="demonstration">房间预定 </span>
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="To"
          start-placeholder="入住日期"
          end-placeholder="退房日期"
          size="middle"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="change"
        />
        <div class="people">
          成人 <span class="font-serif text-xs">13 岁及以上 </span
          ><el-input-number
            style="float: right"
            v-model="adultNum"
            :min="1"
            :max="10"
            @change="handleChangeAdultNum"
          />
        </div>
        <div class="people">
          儿童 <span class="font-serif text-xs">2 - 12 岁</span>
          <el-input-number
            style="float: right"
            v-model="childNum"
            :min="0"
            :max="10"
            @change="handleChangeChildNum"
          />
        </div>
        <div class="people">
          婴幼儿 <span class="font-serif text-xs">2 岁以下</span>
          <el-input-number
            style="float: right"
            v-model="babyNum"
            :min="0"
            :max="10"
            @change="handleChangeBabyNum"
          />
        </div>
        <el-divider />
        <span class="font-bold">总计：</span> ￥{{ house.price }}/晚 x
        {{ days }} 晚 =
        <span class="font-bold">￥{{ house.price * days }}</span>

        <el-button
          @click="handleReserve"
          type="danger"
          class="w-full bg-red-600"
          >预定</el-button
        >
      </div></el-card
    >

    <div>{{ house.des }}</div>
    <div>{{ house.address }}</div>
    <div>￥{{ house.price }}</div>
    <div>♥{{ house.stars }}</div>
    <!-- 评论 -->
    <div class="publish-comment">
      <el-input
        class="publish-item publish-input"
        v-model="content"
        type="textarea"
        placeholder="请输入您的评价"
        clearable
      />
      <el-button
        type="primary"
        @click="SendComment"
        class="bg-blue-600 publish-item publish-btn"
      >
        发布
      </el-button>
    </div>
    <Comment :comment="comments" />
  </div>
</template>
<script setup>
import { getComments, insertComment } from "@/api/comment";
import { getHouseById, getHouseImgById, reserveHouse } from "@/api/house";
import Comment from "@/components/Comment.vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElAffix, ElButton } from "element-plus";
import Gallery from "@/components/Gallery.vue";

const user = JSON.parse(localStorage.getItem("userInfo"));

const route = useRoute();
const router = useRouter();

const comments = ref([]);
const imgs = ref([]);
const adultNum = ref(1);
const childNum = ref(0);
const babyNum = ref(0);
const house = ref("");
const content = ref("");
const startTime = ref("");
const endTime = ref("");
const days = ref(0);

const handleReserve = async () => {
  if (user !== null) {
    let reserve = {
      adultNum: adultNum.value,
      childNum: childNum.value,
      babyNum: babyNum.value,
      userId: user.id,
      houseId: route.params.id,
      startTime: startTime.value,
      endTime: endTime.value,
    };
    if (reserve.startTime !== "" && reserve.endTime !== "") {
      await reserveHouse(reserve).then((res) => {
        if (res.code === 200) {
          ElMessage({
            message: "预定成功，请到个人中心完成支付！",
            type: "success",
          });
        }
      });
    } else {
      ElMessage({
        message: "请选择入住时间！",
        type: "error",
      });
    }
  } else {
    ElMessage({
      message: `请先登录！`,
      type: "error",
      showClose: true,
      center: true,
    });
    router.push("/login");
  }
};

const date = ref("");
const change = (data) => {
  startTime.value = data[0];
  endTime.value = data[1];
  let date1 = new Date(data[0]);
  let date2 = new Date(data[1]);
  let diff = Math.abs(date2 - date1);
  days.value = Math.ceil(diff / (1000 * 60 * 60 * 24));
};
const handleChangeAdultNum = (value) => {
  adultNum.value = value;
  console.log(value);
};
const handleChangeChildNum = (value) => {
  childNum.value = value;
};
const handleChangeBabyNum = (value) => {
  babyNum.value = value;
};

const SendComment = async () => {
  if (user == null) {
    ElMessage({
      message: `请先登录！`,
      type: "error",
      showClose: true,
      center: true,
    });
    router.push("/login");
  } else {
    if (content.value.trim() !== "") {
      await insertComment(content.value, route.params.id, user.id);
      content.value = "";
      Refresh();
    } else {
      ElMessage({
        message: "请输入评论内容！",
        type: "error",
      });
    }
  }
};
const Refresh = async () => {
  const res = await getComments(route.params.id);
  comments.value = res.result;
};
const init = async () => {
  Refresh();
  const res2 = await getHouseById(route.params.id);
  house.value = res2.result;
  const res3 = await getHouseImgById(route.params.id);
  imgs.value = res3.result;
  console.log(imgs.value);
};
init();
</script>
<style lang="scss" scoped>
.people {
  padding: 8px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.gallery {
  // height: 300px;
  width: 100%;
}
.publish-comment {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .publish-input {
    margin: 0 10px;
  }
  .publish-btn {
    padding: 0 10px;
    width: 80px;
    height: 50px;
  }
}
</style>
